<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .buttonGroups {
            padding: 10px 10px;
        }

        .wrap {
            width: 1100px;
            height: 100px;
            border: 1px solid #333;
            margin: 10px;
            margin-top: 0;
            position: relative;
            margin-top: 10px;
        }

        .wrap .sub {
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="buttonGroups">
        <button>开始</button>
    </div>
    <div class="wrap">
        <div class="sub"></div>
    </div>
    <div class="wrap">
        <div class="sub"></div>
    </div>
    <div class="wrap">
        <div class="sub"></div>
    </div>
    <div class="wrap">
        <div class="sub"></div>
    </div>
</body>
<script>
    // js封装  =>   animate(ele,attr,end,aniType,fn)

    // jquery运动  $(ele).animate(params,speed,callback)
    // ele     运动的元素
    // params  运动的属性及其终点值    {left:1000,top:500}  => 可以实现多属性运动 
    // speed   运动的方式   三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    // callback  在运动完成时执行的函数，每个元素执行一次。

    $("button").eq(0).click(function () {
        // $(".sub").animate({ left: 1000 });
        $(".sub").eq(0).animate({ left: 1000 }, "slow");
        $(".sub").eq(1).animate({ left: 1000 }, "normal");
        $(".sub").eq(2).animate({ left: 1000 }, "fast");
        $(".sub").eq(3).animate({ left: 1000 }, 500);
    })






</script>

</html>